<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import type { ComputedRef } from 'vue'
import { docheckphone } from '../../api/user'

import { showConfirmDialog, showToast } from 'vant';



const router = useRouter()
const tel = ref('')


const flag: ComputedRef<boolean> = computed(() => {
    if (/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(tel.value)) {
        // 合法
        return false
    } else {
        // 不合法
        return true
    }

})

// 下一步按钮的点击事件
function onSubmit() {
    docheckphone({
        tel: tel.value
    }).then(res => {
        // console.log(res);
        if (res.data.code == '10005') {
            // 该用户已经存在
            showConfirmDialog({
                title: '温馨提示',
                message: '该手机号已经被注册了，是否需要直接登录呢？',
                confirmButtonText: '去登录',
                confirmButtonColor: '#f66'
            })
                .then(() => {
                    // 点击确认
                    router.push('/login')
                })
                .catch(() => {
                    // 点击取消
                });
        } else if (res.data.code == '200') {
            // 成功
            // 将手机号存起来，因为下一个页面要发送验证码
            localStorage.setItem('tel', tel.value)
            // 跳转页面
            router.push('/register/step2')
        } else {
            // 未知错误
            showToast('温馨提示：' + res.data.message);
        }
    })

}
</script>
<template>
    <div class="content" style="padding: 45px 0;">

        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="tel" name="" label="手机号" placeholder="请输入手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]" />
            </van-cell-group>
            <div style="margin: 26px;">
                <van-button :disabled="flag" round block type="primary" color="#f66" native-type="submit">
                    下一步
                </van-button>
            </div>
        </van-form>
    </div>
</template>